<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文章列表</title>
  <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <link type="text/css" rel="stylesheet" href="js/jedate/css/jedate.css">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/jedate/js/jedate.js"></script>
  <script src="js/tinymce/js/tinymce/tinymce.min.js"></script>
  <script src="js/tinymce/js/tinymce_setup.js"></script>
</head>

<body>
<div class="container-fluid">
  <div class="common_title">
    文章编辑
  </div>
  <div class="container-fluid common_con">
    <form class="form-horizontal article_form">
      <input type="hidden" name="id" id="id">
      <div class="form-group">
        <label for="title" class="col-sm-2 control-label">文章标题：</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="title" name="title">
        </div>
      </div>
      <div class="form-group">
        <label for="cover" class="col-sm-2 control-label">文章封面：</label>
        <div class="col-sm-10">
          <img src="images/pic06.jpg" class="article_cover">
          <input type="file" id="cover" name="cover">
        </div>
      </div>
      <div class="form-group">
        <label for="categoryId" class="col-sm-2 control-label">文章类别：</label>
        <div class="col-sm-4">
          <select class="form-control" name="categoryId" id="categoryId">
            <option>类别一</option>
            <option>类别二</option>
            <option>类别三</option>
            <option selected>类别四</option>
            <option>类别五</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label for="dateinput" class="col-sm-2 control-label">发布时间：</label>
        <div class="col-sm-4">

          <div class="input-group">
            <input type="text" class="form-control" id="dateinput" name="date">
            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"
                                        onclick="jeDate('#dateinput',{trigger:false,format: 'YYYY-MM-DD'})"><i
                                        class="iconfont icon-icondate"></i></button>
                            </span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="rich_content" class="col-sm-2 control-label">文章内容：</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="rich_content" name="content" placeholder="文章内容">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button class="btn btn-success">修改</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script src="js/template-web.js"></script>

<script id="categoryList" type="text/html">
  {{each data}}
  {{if $value.id===data.categoryId }}
  <option value="{{$value.id}}" selected>{{$value.name}}</option>
  {{else }}
  <option value="{{$value.id}}">{{$value.name}}</option>
  {{/if}}
  {{/each}}
</script>
<script !src="">
  function categoryList(categoryId) {
    $.ajax({
      url: 'http://localhost:8080/admin/category/list',
      method: 'get',
      dataType: 'json',
      data: {},
      // data: formData,
      success: function (data) {
        console.log('ajax结果', data);
        if (data.code === 200) {
          data.data.categoryId = categoryId;
          let selectHtml = template('categoryList', data);
          $('select').html(selectHtml)
        } else {
          alert(data.msg)
        }
      }
    })
  }

  function load(id) {
    $.ajax({
      url: 'http://localhost:8080/admin/article/search',
      method: 'get',
      dataType: 'json',
      data: {
        'id': id
      },
      // data: formData,
      success: function (data) {
        console.log('ajax结果', data);
        if (data.code === 200) {
          $('#id').val(data.data.id);
          $('#rich_content').val(data.data.content);
          $('#dateinput').val(data.data.date);
          $('#categoryId').val(data.data.categoryId);
          $('#title').val(data.data.title);
          $('.article_cover').attr('src', data.data.cover)
          // author: "管理员"
          // categoryId: 1
          // content: "<p>2222222222222222</p>"
          // cover: "http://localhost:8080/d15532b61568c7ceb0d437ede08e577b"
          // date: "2020-10-09"
          // id: 232
          // state: "草稿"
          // title: "title-example1"
          categoryList(data.data.categoryId);
        } else {
          console.log(data.msg);
        }
      }
    })
  }

  $(function () {
    let id = window.location.href.split("=")[1];
    console.log('编辑文章', id);
    load(id);

    ///图片 change事件 修改图片
    $('body').on({
      change: function (e) {
        // 动态委派
        console.log('change', '#cover');
        let file = e.target.files[0];
        let path = URL.createObjectURL(file);
        $('.article_cover').attr('src', path)
      }
    }, '#cover');
    /*
      (1)给type类型为submit元素注册点击事件 ： 创建FromData对象就需要查找表单元素
      (2)给表单元素 注册 submit事件，
        a. 点击type为submit的元素会触发
        b. 这个事件中的this就是表单自身，可以不用查找表单元素直接创建FromData对象
      */
    $('.btn-success').on('click', function (e) {
      //禁用表单默认提交事件
      e.preventDefault();
      let formData = new FormData($('form')[0]);
      // formData.set('content', tinyMCE.activeEditor.getContent())
      $.ajax({
        url: 'http://localhost:8080/admin/article/edit',
        type: 'post',
        dataType: 'json',
        data: formData,
        //默认情况下，jq会自动设置post请求头为 application/x-www-form-urlencoded
        //上传文件，需要设置成  multipart/form-data. 设置成contentType:false
        //作用就是取消jq默认设置
        contentType: false,
        //这个属性是jq独有的属性 ： jq会自动将对象序列化成 key=value&key=value这种格式
        //而文件是不能序列化的，设置成false就是取消序列化
        processData: false,
        success: function (data) {
          console.log('发送文件结果', data);
          if (data.code === 200) {
            // 重新到了列表页面,并且加载
            window.location.assign('./article_list.html')
          } else {
            alert(data.msg)
          }
        }
      });
    });
  })
</script>
</body>

</html>